<template>
	<div class="wrap">
		<div class="topBox">
			<div class="left">
				<router-link to="/home/homeView" tag="h3">依云商城后台管理</router-link>
			</div>
			<div class="right">
				<p>欢迎您，{{$store.state.username}}</p>
				<el-button type="text" @click="open" class="logout">注销登录</el-button>
				<router-link tag="div" to="/home/homeSet">
					<button class="set">
						<i class="el-icon-s-tools"></i>
					</button>
				</router-link>
			</div>
		</div>
		
		<div class="bottomBox">
			<div class="lef">
				<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;" ref="parent">
					<el-radio-button :label="true" v-show="isCollapse==false" style="width: 200px;">收起</el-radio-button>
					<el-radio-button :label="false" v-show="isCollapse==true" style="width: 64px;"><</el-radio-button>
				</el-radio-group>
				<el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" router unique-opened>
					<el-submenu index="1">
						<template slot="title">
							<img src="../../public/img/用户管理.png" alt="" />
							<span slot="title">用户管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/home/usersList">
								<img src="../../public/img/分类.png" alt="" />
								用户列表
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					
					<el-submenu index="2">
						<template slot="title">
							<img src="../../public/img/权限管理.png" alt="" />
							<span slot="title">权限管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/home/roleList">
								<img src="../../public/img/分类.png" alt="" />
								角色列表
							</el-menu-item>
						</el-menu-item-group>
						<el-menu-item-group>
							<el-menu-item index="/home/permission">
								<img src="../../public/img/分类.png" alt="" />
								权限列表
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					
					<el-submenu index="3">
						<template slot="title">
							<img src="../../public/img/商品.png" alt="" />
							<span slot="title">商品管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/home/goodsList">
								<img src="../../public/img/分类.png" alt="" />
								商品列表
							</el-menu-item>
						</el-menu-item-group>
						<el-menu-item-group>
							<el-menu-item index="/home/classifyArg">
								<img src="../../public/img/分类.png" alt="" />
								分类参数
							</el-menu-item>
						</el-menu-item-group>
						<el-menu-item-group>
							<el-menu-item index="/home/goodsClassify">
								<img src="../../public/img/分类.png" alt="" />
								商品分类
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					
					<el-submenu index="4">
						<template slot="title">
							<img src="../../public/img/订单管理.png" alt="" />
							<span slot="title">订单管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/home/orderList">
								<img src="../../public/img/分类.png" alt="" />
								订单列表
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					
					<el-submenu index="5">
						<template slot="title">
							<img src="../../public/img/数据统计.png" alt="" />
							<span slot="title">数据统计</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/home/dataReport">
								<img src="../../public/img/分类.png" alt="" />
								数据报表
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</div>
			<router-view />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: false
			};
		},
		methods: {
			open() {
				this.$confirm('将注销此次登录，是否继续', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!',
					});
					this.$router.push("/")
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			}
		}
	}
</script>

<style>
</style>